<link rel="stylesheet" type="text/css" href="/modules/skill_map/resources/css/skill_map.css">

<script type="text/javascript" src="/modules/skill_map/resources/js/skill_tagging_lib.js"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>


<div class="chart-container">
  <div class="skills-container"></div>
  <div id="advanced-div"></div>
  <div id="selector-div"></div>
</div>

<div id="barchart-div" class="chart-container" data-counts="{{ counts }}"></div>

<script>
  google.load('visualization', '1.1', {packages: ['corechart', 'controls']});
  google.setOnLoadCallback(drawBarChart);

  function readData() {
    return JSON.parse(document.getElementById('barchart-div')
        .getAttribute('data-counts'));
  }

  /**
   * Draws a stacked BarChart visualization with the result of readData.
   */
  function drawBarChart() {
    var countsData = readData();

    var table = new google.visualization.DataTable();
    table.addColumn('string', 'Skill');
    table.addColumn('number', 'Completed');
    table.addColumn('number', 'In progress');
    table.addRows(countsData);

    var view = new google.visualization.DataView(table);
    var annotation1 = {
      calc: 'stringify',
      sourceColumn: 1,
      type: 'string',
      role: 'annotation'
    };
    var annotation2 = {
      calc: 'stringify',
      sourceColumn: 2,
      type: 'string',
      role: 'annotation'
    };
    view.setColumns([0, 1, annotation1, 2, annotation2]);

    var options = {
      title: 'Progress of students',
      height: 30 * countsData.length,  // Dynamic size.
      chartArea: {height: '95%'},
      isStacked: true,
      legend: {position: 'top'},
      bar: {groupWidth: '80%'},
      fontSize: 14,
      hAxis: {textPosition: 'out'},
      colors: getGVColorPallet(),
      dataOpacity: 0.85
    };

    var chart = new google.visualization.BarChart(
        document.getElementById('barchart-div'));
    chart.draw(view, options);
  }

  function toDate(dataTable, rowNum) {
    return new Date(dataTable.getValue(rowNum, 0));
  }
</script>

<script>
  $(function() {
    function drawLineChart(skillIds, data, requestedSkillIds) {
      var table = new google.visualization.DataTable();
      var columns = [];
      table.addColumn('string', '');

      for (var i = 0; i < skillIds.length; i++) {
        table.addColumn('number', skillList.getSkillById(skillIds[i]).name);
        columns.push(i + 1);
      }
      table.addRows(data);

      var view = new google.visualization.DataView(table);
      var args = [{calc: toDate, type: 'date', label: 'Date'}].concat(columns);
      view.setColumns(args);
      var dashboard = new google.visualization.Dashboard(
          document.getElementById('dashboard-div'));

      var dateSelector = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'selector-div',
        options: {
          filterColumnLabel: 'Date',
          ui: {
            chartOptions: {
                chartArea: {left: 80, width:'70%', height: '65%'},
                hAxis: {title: 'Date range', textPosition: 'in'},
                height: 70,
                colors: getGVColorPallet()
              },
          },
        }
      });

      var options = {
        vAxis: {minValue: 0, title: 'Student Sum'},
        height: 350,
        chartArea:{left: 80, width:'70%', height:'70%'},
        colors: getGVColorPallet(),
        fontSize: 14,
      };

      var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'advanced-div',
        options: options
      });

      dashboard.bind(dateSelector, chart);
      dashboard.draw(view);
    }

    var skillList = new SkillList();
    skillList.load(function() {
      var skillSelector = new SkillSelectorForAnalytics(
        skillList, 'Skill completion in time');
      skillSelector.build(drawLineChart).appendTo('.skills-container');
    });
  });
</script>
